<template>
<div class="list">
  <div class="left">
    <div class="iconl">
      <div class="imgs"></div>
      <div class="rightTop"></div>
      <div class="fengwei"></div>

      <div class="liebiao">
        <div v-for="(item,index) of FwList" :key="index" class="lisq" >
          <div class="desc">
           {{item.m_code}} {{ item.m_t_name }}
          </div>
          <div class="btn">
            <div class="end" @click="FNum(item)">已用完</div>
            <div class="baoxiao">报损</div>
            <div class="dayin">打印</div>
          </div>
        </div>
      </div>

      <div class="btns">
        <div>已用完 <span>{{ FwNum }}</span></div>
        <div>报损 <span>0</span></div>
        <div>打印 <span>0</span></div>
      </div>
    </div>

  </div>
  <div class="right">
    <div class="iconr">
      <div class="imgs"></div>
      <div class="rightTop"></div>
      <div class="zhiliang"></div>

      <div  class="liebiao">
        <div   class="lisq" v-for="(item,index) of ZlList" :key="index">
          <div class="desc">
            {{item.m_code}}  {{ item.m_t_name }}
          </div>
          <div class="btn">
            <div class="end" @click="ZNum(item)">已用完</div>
            <div class="baoxiao">报损</div>
            <div class="dayin">打印</div>
          </div>
        </div>
      </div>

      <div class="btns">
        <div>已用完 <span>{{ ZlNum }}</span></div>
        <div>报损 <span>0</span></div>
        <div>打印 <span>0</span></div>
      </div>
    </div>



  </div>
</div>
</template>

<script>
import data from '../data.json'
export default {
name: "list",
  data(){
  return {
      data:data.data,
      List:[],
      FwList:[],
      ZlList:[],
    orgBg:'orgBg',
    greenBg:'greenBg',
    redBg:'redBg',
    FwNum:0,
    ZlNum:0,
    }
  },

  methods:{
    getDate(){
      let _this = this
      this.data.forEach(item => {
        _this.List = item.data
      })
    },
    dataC(){
      this.List.forEach(list => {
        if (list.show_t === 'fw'){
          this.FwList.push(list)
        }else if (list.show_t === 'zl') {
          this.ZlList.push(list)
        }
      })
    },
    addClass(){
      let desca = document.querySelectorAll('.liebiao .lisq .desc')
      for ( let i = 0; i < desca.length; i++){

        if (this.List[i].m_t_type == 0){
          desca[i].classList.add('redBg','dongHua')
        }else if (this.List[i].m_t_type == 1){
          desca[i].classList.add('orgBg')
        }else {
          desca[i].classList.add('greenBg')
        }
      }
    },
    FNum(item){
      this.FwList.forEach(value => {
        if (item._id == value._id ){
          this.FwList.splice(value,1)
          this.FwNum += 1
        }
      })
    },
    ZNum(item){
      this.ZlList.forEach(value => {
        if (item._id == value._id ){
          this.ZlList.splice(value,1)
          this.ZlNum += 1
        }
      })
    }
  },
  created() {
    this.getDate()
    this.dataC()
    console.log(this.FwList)
  },
  mounted() {
    this.addClass()
  }
}
</script>

<style scoped>
.list{
  margin: 50px 10px;
  width: 98%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 99;
}


.iconl{
  width: 100%;
  height: 100%;
  background: url("../assets/zuo1_back.png") center / 107% 123% ;
  position: relative;
}
.iconr{
  width: 100%;
  height: 100%;
  background: url("../assets/you1_back.png") center / 107% 123%;
  position: relative;
}
.left,
.right{
  width: 48%;
  height: 100%;
}

.btns{
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  align-items: center;
  justify-content: space-between;
}

.btns div {
  height: 40px;
  line-height: 40px;
  text-align: center;
  width: 33%;
  background: rgb(255, 255, 255);
}
.btns div:first-child{
  border-radius: 0 0  0 5px;
}
.btns div:last-child{
  border-radius: 0 0 5px 0 ;
}

.btns div span{
  font-size: 20px;
  color: rgb(90, 162, 241);
}
.rightTop{
  position: absolute;
  width: 110px;
  height: 60px;
  right: -1px;
  top: -1px;
  background: url("../assets/addwuliao.png") no-repeat center / contain;
}


.greenBg{
  background: rgb(84, 185, 151);
}

.redBg{
  background: rgb(183, 45, 17);

}

.orgBg{
  background: rgb(253, 177, 46);
}

.liebiao{
  position: absolute;
  top: 70px;
  right: 0;
  left: 0;
  height: 80%;
  overflow: auto;
}

.lisq{
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.liebiao .desc{
  padding: 0 5px;
  border-radius: 10px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  width: 60%;
  overflow:hidden;
}
.liebiao .btn{
  width: 40%;
  overflow:hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 300;
  color: #fff;
  margin-left: 10px;
}
.liebiao .btn div{
  text-align: center;
  line-height: 30px;
  margin: 0 5px;
  border-radius: 10px;
  width: 50px;
  height: 30px;
}
.end{
  background: rgb(181, 181, 181);
  cursor: pointer;
}
.baoxiao{
  background: rgb(212, 69, 40);
  cursor: pointer;
}
.dayin{
  background: rgb(254, 169, 27);
  cursor: pointer;
}
.fengwei{
  position: absolute;
  right: 0;
  left: 0;
  top: 30px;
  height: 40px;
  background: url("../assets/xiaoqi.png")no-repeat center / 220px 40px;
}
.zhiliang{
  position: absolute;
  right: 0;
  left: 0;
  top:30px;
  height: 40px;
  background: url("../assets/zhilian.png") no-repeat center / 220px 40px;
}

.dongHua{
  animation: scaleDraw 2s infinite;
}

@keyframes scaleDraw {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
  0%{
    transform: scale(1);  /*开始为原始大小*/
  }
  25%{
    transform: scale(1.1); /*放大1.1倍*/
  }
  50%{
    transform: scale(1);
  }
  75%{
    transform: scale(1.1);
  }
}
</style>